<template>
    <view>
        <view class="p_10">
            <view class="c_9 f_s_14 m_b_5 dis_f_l_c mapBox">
                <u-icon name="map" color="#47C156" size="20"></u-icon>
                <uni-data-picker v-model="districts" :localdata="areaList" placeholder="请选择地区" popup-title="请选择地区" @change="onchange"  ></uni-data-picker>
            </view>
            <view  class="search-box"  @click="handleToSearch">
                <text>搜索商品</text>
                <text class="search-icon">搜索</text>
            </view>
        </view>
        <u-swiper :list="banner" indicator :height="bannerHeight"  imgMode="heightFix" radius="0" indicatorActiveColor="#47C156" indicatorInactiveColor="#dddddd"></u-swiper>
        <u-notice-bar :text="notice" bgColor="#caecce" color="#47C156" style="white-space:pre;"></u-notice-bar>
        <view class="dis_f_sb" style="min-height: 100vh;">
            <view class="goodsType" style="width: 29%;height: 100vh;overflow: auto">
                <scroll-view  scroll-y="true">
                    <view v-for="(item,index) in typeList" :key="item.businessConfigId" class="typeDiv" :class="{ active: activeIndex == index }" @click="changeType(index,item)">
                        <text>{{item.configName}}</text>
                    </view>
                </scroll-view>
            </view>
            <view class="bg_f5" style="width: 70%;height: 100vh;overflow: auto">
                <u-sticky bgColor="#fff">
                    <u-tabs :list="tabList"
                            lineColor="#47C156"
                            :activeStyle="{
                                color: '#47C156',
                                fontWeight: 'bold',
                                transform: 'scale(1.05)'
                            }"
                            :current="activeTabsIndex"
                            @change="changeTabs"></u-tabs>
                </u-sticky>
                <view class="bg_f ">
                    <s-goods :goodsList="list"></s-goods>
                </view>
                <view v-if="list.length==0" class="m_t_50">
                    <s-empty text="暂无数据" mode="list"></s-empty>
                </view>
            </view>
        </view>
        <uni-fab
            v-if="isUp==2"
            :pattern="pattern"
            horizontal="right"
            vertical="bottom"
            direction="horizontal"
            @fabClick="handleToSend"
        ></uni-fab>
    </view>
</template>

<script>
import {myMixins} from "@/mixins/myMixins";
import {getAddressApi, getAreaListApi, getByKeyApi, getInformationListApi, getMyInfoApi} from "@/sheep/api";

export default {
    mixins:[myMixins],
    data() {
        return {
            isUp:'',
            districts:'',
            banner: [],
            bannerHeight: 160,
            notice: "",
            typeList:[],
            activeIndex: 0,
            tabList: [],
            activeTabsIndex:0,
            list:[],
            areaList:[],
            pattern: {
                color: '#7A7E83',
                backgroundColor: '#fff',
                selectedColor: '#27AC2F',
                buttonColor: '#27AC2F',
                iconColor: '#fff'
            },
        };
    },
    async onLoad(options) {
        this.getBannerList();
        this.getBannerHeight();
        this.getNoticeList();

    },
    onReady() {},
    async onShow(options){
        const index = getApp().globalData.curType;
        this.activeIndex = index?index:0;
        await this.getType()
        await this.getArea();
        await this.handleMap()
        await this.getisUp()
        await this.getisRealnameSend()
    },
    methods:{
        // 选择收货地址
        handleMap() {
            let city =uni.getStorageSync('city')
            let adcode =uni.getStorageSync('adcode')
            if (city){
                this.queryObj.city = city;
                this.districts = Number(adcode);
                this.updateList()
                return
            }
            let that = this;
            uni.showLoading({ title: "获取位置中" });
            uni.getLocation({
                type: "gcj02", //返回可以用于uni.openLocation的经纬度
                success: function (res) {
                    const latitude = res.latitude;
                    const longitude = res.longitude;
                    getAddressApi({ location: latitude + "," + longitude }).then((res) => {
                            that.queryObj.city = res.data.city;
                            that.districts = Number(res.data.adcode);
                            that.$forceUpdate()
                            that.updateList()
                            uni.setStorageSync('city', res.data.city)
                            uni.setStorageSync('adcode', res.data.adcode)
                            uni.hideLoading();

                        }
                    );
                },
            });
        },
        getArea(){
            getAreaListApi().then(res=>{
                this.areaList = res.data
            })
        },
        async getBannerList() {
            let res = await getByKeyApi("swiper_list");
            this.banner = res.data;
        },
        async getBannerHeight() {
            let res = await getByKeyApi("swiper_height");
            this.bannerHeight = res.data[0]?.configValue;
        },
        async getisUp() {
            let res = await getByKeyApi("is_up");
            this.isUp = res.data[0]?.configValue;
        },
        async getisRealnameSend() {
            let res = await getByKeyApi("isRealnameSend");
            this.isRealnameSend = res.data[0]?.configValue;
        },
        async getNoticeList() {
            let res = await getByKeyApi("notice");
            res.data.forEach((element) => {
                this.notice += element.configValue + "                     ";
            });
        },
        getList(){
            if (this.queryObj.twoType=='全部'){
                this.queryObj.twoType=''
            }
            this.queryObj.lxNameYj = this.queryObj.type
            this.queryObj.lxNameEj = this.queryObj.twoType
            console.log("this.queryObj", this.queryObj);
            getInformationListApi(this.queryObj).then(res=>{
                this.list = this.list.concat(res.rows)
                this.total = res.total
                if (this.queryObj.pageNum*this.queryObj.pageSize<this.total){
                    this.status = 'loadmore'
                }else{
                    this.status = 'nomore'
                }
                uni.stopPullDownRefresh()
            })
        },
        // 下拉刷新
        onRefresh() {
            this.triggered = true;
            this.updateList()
        },
        // 触底了
        lower() {
            if (this.loadStatus !== "noMore") {
                this.query.pageNum++;
                this.getList();
            }
        },
        handleToInfo(){
            uni.navigateTo({
                url: '/pages/send/info'
            });
        },
        onchange(e) {
            uni.setStorageSync('city', e.detail.value[1].text)
            uni.setStorageSync('adcode', e.detail.value[2].value)
            this.queryObj.city=e.detail.value[1].text
            this.updateList()
        },
        async getType() {
            let res = await getByKeyApi("goods_type");
            this.typeList=res.data.map(item=>{
                if (item.remark){
                    let list = item.remark.split("-");
                    // console.log("list", list);
                    //数组第一个push
                    list.unshift('全部')
                    item.remark = list.map(litem=>{
                        return {
                            name: litem,
                        }
                    });
                }else{
                    item.remark = [{name:'全部'}]
                }
                return item;
            })
            if (this.typeList[this.activeIndex].remark.length>0){
                this.tabList = this.typeList[this.activeIndex].remark;
                this.queryObj.twoType = this.typeList[this.activeIndex].remark[this.activeTabsIndex]?.name
            }
            this.queryObj.type=this.typeList[this.activeIndex].configName
        },
        changeType(index,item) {
            this.activeIndex = index;
            this.activeTabsIndex = 0
            uni.setStorageSync('activeIndex', index)
            this.queryObj.type=item.configName
            this.tabList=this.typeList[index].remark
            this.queryObj.twoType = item.remark.length>0?item.remark[0].name:''
            this.updateList()
        },
        changeTabs(e){
            this.activeTabsIndex = e.index
            this.queryObj.twoType = e.name
            this.updateList()
        },
        updateList(){
            this.queryObj.pageNum=1
            this.list=[]
            this.getList()
        },
        handleToSearch(){
            uni.navigateTo({
                url: '/pages/index/search'
            });
        },
        handleToSend(){
            if (this.isRealnameSend==1){
                getMyInfoApi().then((res) => {
                    if (res.data.ifCardReview!=3){
                        uni.showModal({
                            content: '您还未实名，请先实名认证',
                            confirmText: '去实名',
                            success: (res) => {
                                if (res.confirm) {
                                    uni.navigateTo({
                                        url: '/pages/mine/realName',
                                    });
                                }
                            },
                        })
                    }else{
                        uni.navigateTo({
                            url: "/pages/send/info",
                        });
                    }

                });
            }else{
                uni.navigateTo({
                    url: "/pages/send/info",
                });
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.mapBox{
    /deep/.input-value-border{
        border: unset!important;
    }
    /deep/.uni-icons{
        display: none!important;
    }
}
/deep/.uni-data-tree-dialog {
    z-index:99999!important;
}
.search-box {
    border:1rpx solid #54B62D;
    border-radius: 40rpx;
    height: 70rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5rpx 0 30rpx;
    color: #999;
    font-size: 26rpx;
    .search-icon {
        background-color: #54B62D;
        border-radius: 40rpx;
        color: #fff;
        height: 60rpx;
        width: 120rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.goodsType {
    flex: 1;
    // background: rebeccapurple;
    background: #fff;
    overflow: auto;
    //color: #47C156;
    font-size: 24rpx;
    .typeDiv {
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .active {
        background-color: #f5f5f5;
        color: #47C156;
    }
}
</style>
